<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form :model="form" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
         
        <el-form-item label="验证码">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="form.captcha" placeholder="请输入验证码" />
            </el-col>
            <el-col :span="12">
              <div class="captcha-display" @click="refreshCaptcha">
                {{ captchaText }}
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElButton, ElCard,ElMessage  } from 'element-plus';
  import { useRouter } from 'vue-router';   // npm install vue-router@4  没有的话安装下
  import { RouterView } from 'vue-router'; 
  import axios from 'axios';
  import request from '../utils/request';
  import { useUserStore } from '../utils/userStore'   //npm install pinia
  const userStore = useUserStore()
  const router = useRouter(); // 获取路由
 
  // 表单数据
const form = ref({
  username: '',
  password: '',
  captcha: '',
  token: '',
});

// 验证码
const captchaText = ref(generateCaptcha());

// 生成随机验证码
function generateCaptcha() {
  return Math.floor(1000 + Math.random() * 9000).toString();
}

// 刷新验证码
function refreshCaptcha() {
  captchaText.value = generateCaptcha();
}
  
  const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ]
    };

    const params = {
    createdBy: 'admin', // 创建人姓名
    perms: 'sys:user'  // 角色权限标识
};


  
  const handleLogin = async () => {
    debugger;
    const paramsQuery = {
        createdBy: 'admin',
        perms: 'sys:user'
    };

    if (form.value.captcha !== captchaText.value) {
    ElMessage.error('验证码错误');
    refreshCaptcha();
    return;
  }
   
    const user = await axios.post('http://localhost:8080/sys/logininfor/login',form.value );
    debugger;
    const token = user.data.token;
    localStorage.setItem('token', token);
    if(user.data.code == 200){
      form.value.token = token;
      const menuData = await request.post('/sys/logininfor/queryMenus', form.value);
      sessionStorage.setItem('menuData', JSON.stringify(menuData.data));
      sessionStorage.setItem('user', JSON.stringify(user.data.user));
      userStore.setUser(user.data.user);
      router.push("/main");
      ElMessage({
        message: user.data.message,
        type: 'success',
        plain: true,
      })
    }else{
      ElMessage({
        message: user.data.message,
        type: 'error',
        plain: true,
      })
    }

    
  };
  
  const resetForm = () => {
    form.value.username = '';
    form.value.password = '';
  };
  </script>
  
  <style scoped>
   
  
  .login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-image: url('/src/assets/login.jpg'); /* 添加背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
  }
  
  .login-card {
    width: 20%; /* 可以根据需求调整宽度占比 */
    min-width: 200px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f0ecec;
    border-radius: 8px;
    opacity: 0.9; /* 半透明效果 */
   
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  
  .el-button {
      width: 45%;
   
    }
  
      
    .el-form-item {
      margin-bottom: 25px;
    }
  
    .el-input {
      margin-right: 7%;
    }
  
    
    .login-title {
    text-align: center;
    margin-bottom: 25px;
  }

.captcha-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 31px;
  background-color: #f5f7fa;
  border: 1px so  lid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  font-weight: bold;
}

.captcha-display:hover {
  background-color: #ebeef5;
}  

  </style>